<template>
	<view class="container">

		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
			<view v-if="hotelRoomList.length > 0" class="goods-list ss-m-t-20">

				<view class="ss-p-l-20 ss-p-r-20 ss-m-b-20" v-for="item in hotelRoomList" :key="item.id">

					<view class="lg-goods-card ss-flex ss-col-stretch" @tap="handleToRoomDetail(item.id)">

						<view class="groupon-tag ss-flex ss-row-center" v-if="item.status!=='0'">
							<view class="tag-icon">{{formatStatus(item.status)}}</view>
						</view>

						<image class="lg-img-box" :src="item.roomImage|| '/static/images/default.png'" mode="aspectFill"></image>
						<view class="lg-goods-content ss-flex-1 ss-flex-col ss-row-between ss-p-b-10 ss-p-t-20">
							<view>
								<view class="lg-goods-title ss-line-2">
									{{item.roomName}}
								</view>
								<view class="lg-goods-subtitle ss-m-t-10 ss-line-1">
									{{item.hotelName}}
								</view>
							</view>
							<view>
								<!-- 							  <view class="tag-box ss-flex ss-col-center" v-if="item.status==='3'">
				 							    <view class="activity-tag ss-m-r-10">
				 							      满房
				 							    </view>
				 							  </view> -->
								<view class="ss-flex ss-col-bottom ss-m-t-10">
									<view class="lg-goods-price ss-m-r-12 ss-flex ss-col-bottom font-OPPOSANS">
										<text class="ss-font-24">￥</text>
										{{item.price}}
									</view>
								</view>
								<view class="ss-m-t-8 ss-flex ss-col-center ss-flex-wrap" v-if="item.roomNum">
									<view class="sales-text">剩余 {{item.roomNum}} 间</view>
								</view>
							</view>
						</view>

						<slot name="cart">
							<view class="buy-box ss-flex ss-col-center ss-row-center"> 去查看 </view>
						</slot>
					</view>

				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import {
		selectHotelRoomByHotelId
	} from "@/api/system/room"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";

	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				upOption:{
					// page: {
					// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					textNoMore:'没有更多数据了',
					empty:{
						tip: '暂无房源', // 提示
						icon:'https://cdn.uviewui.com/uview/empty/list.png',
					}
				},
				searchParams: {
					hotelId: '',
					pageSize:'10',
					pageNum:'1'
				},
				hotelRoomList: []
			}
		},
		methods: {
			upCallback(page) {
				this.searchParams.pageNum = page.num; // 页码, 默认从1开始
				this.searchParams.pageSize = page.size; // 页长, 默认每页10条
				selectHotelRoomByHotelId(this.searchParams).then(response => {


					// 接口返回的当前页数据列表 (数组)
					let curPageData = response.rows;
					
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length;
					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
					let totalPage = response.total;
					//设置列表数据
					if (page.num == 1) this.hotelRoomList = []; //如果是第一页需手动置空列表
					this.hotelRoomList = this.hotelRoomList.concat(curPageData); //追加新数据

					// 请求成功,隐藏加载状态
					//方法一(推荐): 后台接口有返回列表的总页数 totalPage
					this.mescroll.endBySize(curPageLen, totalPage);

					//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
					//this.mescroll.endBySize(curPageLen, totalSize); 

					//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
					//this.mescroll.endSuccess(curPageLen, hasNext); 

					//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.
					//如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
					//如果传了hasNext,则翻到第二页即可显示无更多数据.
					//this.mescroll.endSuccess(curPageLen);

					// 如果数据较复杂,可等到渲染完成之后再隐藏下拉加载状态: 如
					// 建议使用setTimeout,因为this.$nextTick某些情况某些机型不触发
				}).catch(() => {
					this.mescroll.endErr()
				})
			},
			
			handleToRoomDetail(roomId){
				 const hotelId = this.searchParams.hotelId;
				this.$tab.navigateTo(`/pages/hotel/change/index?hotelId=${hotelId}&roomId=${roomId}`)
			},
			
			formatStatus(status){
				if(status==='1'){
					return '涨价';
				}
				else if(status==='2'){
					return '降价';
				}
				else if(status==='3'){
					return '补房';
				}
				else if(status==='4'){
					return '满房';
				}
				else if(status==='5'){
					return '上架';
				}
				else if(status==='6'){
					return '下架';
				}
			}
			
		},
		onLoad(event) {
			if (event.hotelId) {
				this.searchParams.hotelId = event.hotelId
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tag-icon-box {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 2;

		.tag-icon {
			width: 72rpx;
			height: 44rpx;
		}
	}

	.seckill-tag {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 2;
		width: 68rpx;
		height: 38rpx;
		background: linear-gradient(90deg, #ff5854 0%, #ff2621 100%);
		border-radius: 10rpx 0px 10rpx 0px;
		font-size: 24rpx;
		font-weight: 500;
		color: #ffffff;
		line-height: 32rpx;
	}

	.groupon-tag {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 2;
		width: 68rpx;
		height: 38rpx;
		background: linear-gradient(90deg, #fe832a 0%, #ff6600 100%);
		border-radius: 10rpx 0px 10rpx 0px;
		font-size: 24rpx;
		font-weight: 500;
		color: #ffffff;
		line-height: 32rpx;
	}

	.goods-img {
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;
	}

	.price-unit {
		margin-right: -4px;
	}

	.sales-text {
		display: table;
		font-size: 28rpx;
		transform: scale(0.8);
		margin-left: 0rpx;
		color: #c4c4c4;
	}

	.activity-tag {
		font-size: 20rpx;
		color: #ff0000;
		line-height: 30rpx;
		padding: 0 10rpx;
		border: 1px solid rgba(#ff0000, 0.25);
		border-radius: 4px;
		flex-shrink: 0;
	}

	.goods-origin-price {
		font-size: 20rpx;
		color: #c4c4c4;
		line-height: 36rpx;
		text-decoration: line-through;
	}

	// lg
	.lg-goods-card {
		overflow: hidden;
		position: relative;
		z-index: 1;
		background-color: $white;
		height: 260rpx;

		.lg-img-box {
			width: 260rpx;
			height: 250rpx;
			margin-right: 20rpx;
		}

		.lg-goods-title {
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			// line-height: 36rpx;
			// width: 410rpx;
		}

		.lg-goods-subtitle {
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			// line-height: 30rpx;
			// width: 410rpx;
		}

		.lg-goods-price {
			font-size: 34rpx;
			color: $red;
			line-height: 36rpx;
		}

		.buy-box {
			position: absolute;
			bottom: 20rpx;
			right: 20rpx;
			z-index: 2;
			width: 120rpx;
			height: 50rpx;
			background: linear-gradient(90deg, #fe8900, #ff5e00);
			border-radius: 25rpx;
			font-size: 24rpx;
			color: #ffffff;
		}

		.tag-box {
			width: 100%;
		}
	}
</style>